<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：9、表单控件绑定  基础用法</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<!-- 文本 -->
		<input v-model="message" placeholder="edit me">
		<p>Message is: {{ message }}</p><br/><br/>

		<!-- 多行文本 -->
		<span>Multiline message is:</span>
		<p style="white-space: pre">{{ message1 }}</p>		
		<textarea v-model="message1" placeholder="add multiple lines"></textarea><br/><br/>

		<!-- 
			复选框 
			这里绑定的vm.checked是布尔值
		-->
		<input type="checkbox" id="checkbox" v-model="checked">
		<label for="checkbox">{{ checked }}</label><br/><br/>

		<!-- 
			多个勾选框，绑定到同一个数组 
			这里绑定的vm.checkedNames是数组值
		-->
		<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
		<label for="jack">Jack</label>
		<input type="checkbox" id="john" value="John" v-model="checkedNames">
		<label for="john">John</label>
		<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
		<label for="mike">Mike</label><br/>				
		<span>Checked names: {{ checkedNames }}</span><br/><br/>

		<!-- 
			单选按钮 
			这里绑定的vm.picked是选中的按钮的值即字符串
		-->
		<input type="radio" id="one" value="one" v-model="picked">
		<label for="one">One</label>
		<input type="radio" id="two" value="two" v-model="picked">
		<label for="two">Two</label><br/>
		<span>Picked: {{ picked }}</span><br/><br/>

		<!-- 选择列表 -->
		<!-- 单选列表 -->
		<select v-model="selected">
			<!-- 当选项没有指明value属性时，默认选项的属性值为文本值；否则则为选中选项的value属性值 -->
			<option value="A">a</option>   			
			<option>B</option>
			<option>C</option>
		</select>
		<span>Selected: {{ selected }}</span><br><br/>

		<!-- 
			多选列表 
			这里的vm.selected1是一个数组,使用ctrl+鼠标点击进行多选
		-->
		<select v-model="selected1" multiple>
			<option>A</option>
			<option>B</option>
			<option>C</option>
		</select><br/>
		<span>Selected: {{ selected1 }}</span><br/><br/>

		<!-- 动态选项，用v-for渲染 -->
		<select v-model="selected2">
			<option v-for="option in options" v-bind:value="option.value">
				{{ option.text }}
			</option>
		</select><br/>
		<span>Selected: {{ selected2 }}</span>
	</div>

	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				message: 'huyihao is a handsome man.',
				message1: 'how to train youself as a good coder',
				checked: false,
				checkedNames: [],
				picked: 'one',
				selected: 'A',
				selected1: [],
				options: [
					{ text: 'One', value: 'A' },
					{ text: 'Two', value: 'B' },
					{ text: 'Three', value: 'C' },
				],
				selected2: 'B'
			}
		})
	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->